blob: 9e6343d47b7dce517f8252b73aa34b80763d4df0 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
|
<template>
<div id="account-template" class="app-component-entry">
<TabGroup :selectedIndex="tabId" @change="onTabChange" as="div" class="container h-full m-auto mt-0 mb-10 duration-150 ease-linear">
<div class="flex w-full py-2 xl:w-auto lg:pt-4 xl:fixed">
<TabList as="div" class="flex flex-row mx-auto mb-1 xl:mx-0 xl:mb-0">
<Tab v-slot="{ selected }" >
<span class="page-link" :class="{ 'active': selected }">
Profile
</span>
</tab>
<Tab v-slot="{ selected }" >
<span class="page-link" :class="{ 'active': selected }">
Settings
</span>
</tab>
</TabList>
</div>
<TabPanels as="div" class="xl:my-16 md:mb-4">
<TabPanel :unmount="false">
<Profile />
</TabPanel>
<TabPanel :unmount="false">
<Settings />
</TabPanel>
</TabPanels>
</TabGroup>
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { usePageGuard, useTitle } from '@vnuge/vnlib.browser'
import { useRouteParams } from '@vueuse/router'
import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'
import Settings from './components/settings/Settings.vue'
import Profile from './components/profile/Profile.vue'
usePageGuard()
useTitle('Account')
enum ComponentType{
Profile = 'profile',
Oauth = 'oauth',
Settings = 'settings'
}
const comp = useRouteParams<ComponentType>('comp')
const tabId = computed<number>(() =>{
switch (comp.value) {
case ComponentType.Oauth:
return 1
case ComponentType.Settings:
return 2
case ComponentType.Profile:
default:
return 0
}
})
const onTabChange = (tabid : number) =>{
switch (tabid) {
case 1:
comp.value = ComponentType.Oauth
break
case 2:
comp.value = ComponentType.Settings
break
case 0:
default:
comp.value = ComponentType.Profile
break
}
}
</script>
<style lang="scss">
#account-template{
p{
@apply text-gray-700 dark:text-gray-400;
}
.page-link{
font-size: 1.1rem;
@apply border-b-2 border-transparent cursor-pointer mx-2 px-1;
}
.page-link.active{
@apply border-primary-500;
}
.acnt-content-container{
@apply m-auto max-w-3xl;
}
.panel-container{
}
.panel-container .panel-header{
@apply flex flex-row px-2;
}
.panel-container .panel-content{
@apply bg-white dark:bg-dark-800 border-transparent dark:border-dark-500;
@apply m-auto max-w-3xl border sm:rounded-md shadow-md sm:p-4 p-3 sm:my-3 my-2;
}
.panel-container .panel-header .panel-title{
@apply my-auto;
}
}
</style>
|
